<template>
	<div
	class="contener"
	v-loading="loading"
	element-loading-background="rgba(0, 0, 0, 0.8)"
	>
		<div class="top" style="display: flex; justify-content:flex-end ; margin: 10px 2px 15px 0px; color: beige;"><i class="el-icon-location-outline" style="margin-right: 5px;" />{{ text }}</div>
	
		<div class="block">
		 
			
			<el-collapse v-model="activeNames"  
			  >
			  <el-collapse-item title="顶点颜色 Zenith Color" name="1" >
			    
			     <el-color-picker
			     v-model="Acolor[0].index"
			     show-alpha
			     @active-change="Color=>change(Color, 0)"
			    @change="index(0)"
			     :predefine="predefineColors">
			    </el-color-picker>
			  </el-collapse-item>
			  <el-collapse-item title=" 地平线颜色:Horizon Color" name="2">
			    <el-color-picker
			    v-model="Acolor[1].index"
			    show-alpha
			    @active-change="Color=>change(Color, 1)"
			    @change="index(1)"
			    :predefine="predefineColors">
			    </el-color-picker>
			  </el-collapse-item>
			  <el-collapse-item title="云彩 Cloud Color" name="3">
			   <el-color-picker
			   v-model="Acolor[2].index"
			   show-alpha
			   @active-change="Color=>change(Color, 2)"
			   @change="index(2)"
			   :predefine="predefineColors">
			   </el-color-picker>
			  </el-collapse-item>
			  <el-collapse-item title="整体颜色:Overall Color" name="4">
			    <el-color-picker
			    v-model="Acolor[3].index"
			    show-alpha
			    @active-change="Color=>change(Color, 3)"
			    @change="index(3)"
			    :predefine="predefineColors">
			    </el-color-picker>
			  </el-collapse-item>
			  <el-collapse-item title="太阳高度:Sun Height" name="5">
				  <el-slider v-model="value"
				  :min="-1"
				  :max="1"
				  :show-tooltip="false"
				  show-input
				  :step="0.01"
				  @input="changesun()"
				  ></el-slider>
				</el-collapse-item>
				<el-collapse-item title="云层速度 Cloud speed" name="6">
					<el-slider v-model="value1"
					:min="0"
					:max="10"
					:show-tooltip="false"
					show-input
					:step="0.001"
					@input="changecloud()"
					></el-slider>			  
				</el-collapse-item>
				<el-collapse-item title="太阳位置决定的颜色" name="7">
					<el-checkbox v-model="checked"
					@change="sunposition()"
					></el-checkbox>
				</el-collapse-item>
			</el-collapse>
			
			
			
		</div>
	</div>
		
	
	
</template>

<script>
    export default {
        data() {
            return {
                activeNames: [''],
                loading: true,
                checked: true,

                Acolor: [{
                    index: ''
                }, {
                    index: ''
                }, {
                    index: ''
                }, {
                    index: ''
                }, ],

                predefineColors: [
                    '#ff4500',
                    '#ff8c00',
                    '#ffd700',
                    '#90ee90',
                    '#00ced1',
                    '#1e90ff',
                    '#c71585',
                    'rgba(255, 69, 0, 0.68)',
                    'rgb(255, 120, 0)',
                    'hsv(51, 100, 98)',
                    'hsva(120, 40, 94, 0.5)',
                    'hsl(181, 100%, 37%)',
                    'hsla(209, 100%, 56%, 0.73)',
                    '#c7158577'
                ],
                value: -1,
                value1: 1,



                ObjectPath: "",
                Access: "READ_ACCESS",
                Name: [{
                    colorname: 'Zenith Color'
                }, {
                    colorname: 'Horizon color'
                }, {
                    colorname: 'Overall Color'
                }, {
                    colorname: 'Cloud color'
                }, {
                    colorname: 'Sun height'
                }, {
                    colorname: 'Cloud speed'
                }],

                Outcolor: [{
                    color: {
                        R: '',
                        G: '',
                        B: '',
                        A: ''
                    }
                }, {
                    color: {
                        R: '',
                        G: '',
                        B: '',
                        A: ''
                    }
                }, {
                    color: {
                        R: '',
                        G: '',
                        B: '',
                        A: ''
                    }
                }, {
                    color: {
                        R: '',
                        G: '',
                        B: '',
                        A: ''
                    }
                }]

                ,

                // {colorname:'Horizon color'},
                // {colorname:'Overall Color'},
                // {colorname:'Cloud color'},
                // {colorname:'Sun height'},
                // {colorname:'Cloud speed'}
                // ],



                text: 'BP_Sky_Sphere_2',




            }
        },
        created() {
            // this.GetBP_SKy_Sphere()
        },
        mounted() {

            this.GetBP_SKy_Sphere();
        },
        methods: {

            change(Color, item) {

                var c = Color;
                var rgb = (c.toString()).replace(/^rgba?\(|\s+|\)$/g, '').split(',');
                this.Outcolor[item].color.R = parseInt(rgb[0]);
                this.Outcolor[item].color.G = parseInt(rgb[1]);
                this.Outcolor[item].color.B = parseInt(rgb[2]);
                this.Outcolor[item].color.A = parseInt(rgb[3]);
                // console.log("赋值",this.Outcolor[item].color)

            },
            sunposition() {
                this.axios.put('/remote/object/property', {
                        "objectPath": this.ObjectPath,
                        "access": "WRITE_TRANSACTION_ACCESS",
                        "propertyName": 'Colors determined by sun position',
                        "propertyValue": {
                            "Colors determined by sun position": this.checked
                        }


                    }, {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }


                ).then(res => {

                })
            },
            index(item) {

                let name = this.Name[item].colorname;
                let json2 = {
                    R: this.Outcolor[item].color.R,
                    G: this.Outcolor[item].color.G,
                    B: this.Outcolor[item].color.B,
                    A: this.Outcolor[item].color.A
                }
                let json = {}
                json[name] = json2

                console.log(json)
                this.axios.put('/remote/object/property', {
                        "objectPath": this.ObjectPath,
                        "access": "WRITE_TRANSACTION_ACCESS",
                        "propertyName": this.Name[item].colorname,
                        "propertyValue": json


                    }, {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }


                ).then(res => {
                    console.log(json)
                })

            },

            changesun() {


                if (this.value != -1) {
                    this.axios.put('/remote/object/property', {
                            "objectPath": this.ObjectPath,
                            "access": "WRITE_TRANSACTION_ACCESS",
                            "propertyName": this.Name[4].colorname,
                            "propertyValue": {
                                "Sun height": this.value

                            }
                        }, {
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        }


                    ).then(res => {

                    })
                }


            },
            changecloud() {
                if (this.value1 != 1) {
                    this.axios.put('/remote/object/property', {
                            "objectPath": this.ObjectPath,
                            "access": "WRITE_TRANSACTION_ACCESS",
                            "propertyName": this.Name[5].colorname,
                            "propertyValue": {
                                "Cloud speed": this.value1

                            }
                        }, {
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        }


                    ).then(res => {
                        // console.log(2)
                    })

                }


            },

            GetBP_SKy_Sphere() {
                this.changeData()
                let path;
                if (this.ObjectPath == '') {
                    console.log(this.ObjectPath, '111')
                } else {
                    path = this.ObjectPath
                    let index2 = path.indexOf(this.text)
                    if (index2 > 0) {
                        path = this.ObjectPath
                    } else {
                        path = this.ObjectPath + "." + this.text
                    }
                    console.log(path)
                }

                this.axios.put('/remote/object/property', {
                    "ObjectPath": path,
                    "Access": this.Access
                }, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((res) => {
                        console.log(res)
                            // let ceshi=[]
                            // ceshi[0] =  Math.round(res.data[this.Name[0].colorname].R)
                            // ceshi[1] =  Math.round(res.data[this.Name[0].colorname].G)
                            // ceshi[2] =  Math.round(res.data[this.Name[0].colorname].B)
                            // ceshi[3] = 1

                        // let zcolor ="rgba("+ceshi.toString()+")"
                        // this.color0=zcolor;

                        // let ceshi2=[]
                        // ceshi2[0] =  Math.round(res.data[this.Name[1].colorname].R)
                        // ceshi2[1] =  Math.round(res.data[this.Name[1].colorname].G)
                        // ceshi2[2] =  Math.round(res.data[this.Name[1].colorname].B)
                        // ceshi2[3] = 1
                        // let hcolor ="rgba("+ceshi2.toString()+")"
                        // this.color1=hcolor;


                        this.value = res.data[this.Name[4].colorname]

                        this.value1 = res.data[this.Name[5].colorname]
                        this.checked = res.data['Colors determined by sun position']

                        // 	 }
                        // 	 console.log('2222')
                        // 		 let shuji=ceshi.toString();
                        // 		 let ccc ="rgba("+shuji+")"
                        // 		 this.color[i]=ccc;

                        //  }




                        let cc = []
                        for (let i = 0; i < 4; i++) {
                            let colorValue = "";
                            for (let j in res.data[this.Name[i].colorname]) {
                                colorValue += res.data[this.Name[i].colorname][j] + ",";

                            }
                            if (colorValue.length > 0) {
                                colorValue = colorValue.substr(0, colorValue.length - 1);
                            }

                            let list = "rgba(" + colorValue + ")";
                            cc[i] = list
                                // this.color[i]=list[i]
                        }


                        for (let j = 0; j < 4; j++) {
                            this.Acolor[j].index = cc[j]
                        }


                        this.loading = false;

                    },
                    (err) => {
                        console.log("路径填写失败")
                    }
                )
            }



        }


    }
</script>

<style>
    .contener {
        width: 100%;
    }
    
    .el-color-picker {
        width: 100%;
        margin-top: 10px;
    }
    
    .el-color-picker__trigger {
        width: 100%;
        height: 30px;
    }
    
    .block {
        width: 95%;
        color: aliceblue;
    }
    /* .input{
		margin-top: 2px;
		margin-bottom: 10PX;
		display: flex;
		justify-content: flex-start;
		margin-left: -10px;
	} */
    
    .el-collapse-item__header {
        background-color: #333A46;
        border-bottom: #333A46;
        color: #FFFFFF;
        text-align: center;
    }
    
    .el-collapse-item__content {
        background-color: #333A46;
        margin-left: 10px;
    }
    
    .el-collapse-item__wrap {
        background-color: #333A46;
    }
</style>